<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      window.onload = function () {
        // var items = document.getElementsByName("items");
        var items = document.querySelectorAll("tbody td input"); //querySelector
        var qx = document.getElementById("qx"); //getElementById

        qx.onclick = function () {
          var items = document.getElementsByName("items");
          for (var i = 0; i < items.length; i++) {
            items[i].checked = qx.checked;
          }
        };
        for (var i = 0; i < items.length; i++) {
          items[i].onclick = function () {
            var flag = true;
            for (var i = 0; i < items.length; i++) {
              if (!items[i].checked) {
                flag = false;
                break;
              }
            }
            qx.checked = flag;
          };
        }
        //1 当全选input选中时 将下面得input 都设为选中
        //2 当全选input不选中时， 将下面得input 都设为不选中

        //3 当我选中下面任意一项时，查看是否全部都选中了，全部选中了，就将全选input设为选中
        //4 当我取消选中下面任意一项时，就将全选input设为不选中
      };
    </script>
  </head>
  <body>
    <h2>管理员列表</h2>
    <table border="1px" width="500px">
      <thead>
        <tr>
          <th><input type="checkbox" id="qx" />全选</th>
          <th>管理员id</th>
          <th>姓名</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="checkbox" name="items" id="" /></td>
          <td>1</td>
          <td>tester</td>
          <td>修改 删除</td>
        </tr>
        <tr>
          <td><input type="checkbox" name="items" id="" /></td>
          <td>2</td>
          <td>tester</td>
          <td>修改 删除</td>
        </tr>
        <tr>
          <td><input type="checkbox" name="items" id="" /></td>
          <td>3</td>
          <td>tester</td>
          <td>修改 删除</td>
        </tr>
        <tr>
          <td><input type="checkbox" name="items" id="" /></td>
          <td>4</td>
          <td>tester</td>
          <td>修改 删除</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
